import React, {useState, useRef} from 'react';
import {message ,Button,Divider,Tooltip} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { connect} from 'umi';
import { PlusOutlined } from '@ant-design/icons';
import { getBankCardList,updateUserBankCard} from '../service';
import moment from 'moment';
import AddForm from './components/AddForm';
import Details from './components/Details';
import store from 'store2';

const TableList = ({currentUser}) => {
  const actionRef = useRef();
  const [visible, setVisible] = useState(false);
  const [loading,setLoading] = useState(false);
  const [record,setRecord] = useState(null);
  const [show,setShow] = useState(false);
  const [flag,setFlag] = useState(false);
  const [status,setStatus] = useState(false);

  const addBankcard = () =>{
    setVisible(true);
  };

  const updateCard = (record) => {
    setVisible(true);
    setRecord(record);
  };

  const handleCancel = () => {
    setVisible(false);
    setShow(false);
    setRecord(null);
  };

  const handleSubmit = (values) => {
    setLoading(true);
    updateUserBankCard(values).then((res)=>{
      if(res.flag){
        setVisible(false);
        store.remove(`personnel-bankcard-` + currentUser.id);
        message.success('操作成功！');
        actionRef.current.reload();
      }else{
        message.error(res.error);
      }
      setLoading(false);
    })
  };

  const queryDetails = (record) =>{
    setShow(true)
    setRecord(record)
  };

  const columns = [
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
    },
    {
      title: '持卡人姓名',
      dataIndex: 'createName',
      hideInSearch: true,
      key:'createName'
    },
    {
      title: '开户银行',
      hideInSearch: true,
      dataIndex: 'bankAccount',
      key:'bankAccount',
    },
    {
      title: '所属支行',
      hideInSearch: true,
      dataIndex: 'subBranch',
      key:'subBranch',
    },
    {
      title: '银行卡号',
      hideInSearch: true,
      dataIndex: 'bankcardNum',
      key:'bankcardNum',
    },
    {
      title: '生效时间',
      dataIndex: 'effectiveDate',
      hideInSearch: true,
      render: (text) => {
        return moment(text).format('YYYY-MM-DD');
      },
    },
    status && {
      title: '驳回理由',
      dataIndex: 'remark',
      hideInSearch: true,
      onCell: ()=>{
        return {
          style:{
            color:'red'
          }
        }
      },
      render: remark => (
        <Tooltip placement="top" title={remark} >{remark}</Tooltip>
      ),
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (item, record) => (
        <>
          <a onClick={() => updateCard(record)}>修改</a>
          <Divider type="vertical"/>
          <a onClick={() => queryDetails(record)}>记录</a>
        </>
      ),
    }
  ];
  return (
    <PageHeaderWrapper>
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        search={false}
        request={(params) => getBankCardList(params).then(res => {
          setFlag( Object.keys(res)?.length === 0 ?false:true);
          setStatus(res.data[0].status === 3 ? true : false);
          return res;
        })}
        columns={columns}
        toolBarRender={(action, { selectedRows }) => [
            <Button type="primary" disabled={flag} onClick={() => addBankcard()}><PlusOutlined/>新增</Button>
        ]}
      />
      <AddForm
        loading={loading}
        visible={visible}
        record={record}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      />
      <Details
        visible={show}
        onCancel={handleCancel}
        record={record}
      />
    </PageHeaderWrapper>
  )
}

export default connect(({user}) => ({
  currentUser: user.currentUser,
}))(TableList)
